<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>用户借阅情况</title>

        <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet">
        <link th:href="@{/css/plugins/dataTables/datatables.min.css}" rel="stylesheet">
        <link th:href="@{/css/animate.css}" rel="stylesheet">
        <link th:href="@{/css/style.css}" rel="stylesheet">

    </head>

    <body>

        <div id="wrapper">

            <nav class="navbar-default navbar-static-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav metismenu" id="side-menu">
                        <li class="nav-header">
                            <div class="dropdown profile-element">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">惠岩</strong>
                             </span> <span class="text-muted text-xs block">管理员 <b class="caret"></b></span> </span>
                                </a>
                                <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                    <li class="divider"></li>
                                    <li><a href="/custom/logout">退出登录</a></li>
                                </ul>
                            </div>
                            <div class="logo-element">
                                摆烂
                            </div>
                        </li>
                        <li>
                            <a href="/custom/myAppoint"><i class="fa fa-home"></i> <span class="nav-label">个人中心</span></a>
                        </li>
                        <li>
                            <a href="/dispatcher/graph_flot"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">借阅榜</span></a>
                        </li>
                        <li>
                            <a href="/custom/listBook?bookName="><i class="fa fa-bar-chart-o"></i> <span class="nav-label">浏览馆藏</span></a>
                        </li>
                        <li>
                            <a href="/customer/adminBook/listBook"><i class="fa fa-table"></i> <span
                                    class="nav-label">管理图书</span><span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse">
                                <li><a href="/customer/adminBook/listBook">查看图书</a></li>
                                <li><a href="/customer/adminBook/addBookPage">添加图书</a></li>
                            </ul>
                        </li>
                        <li class="active">
                            <a href="/customer/adminUser/listUser?userId="><i class="fa fa-slideshare"></i> <span class="nav-label">管理用户</span><span
                                    class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse">
                                <li><a href="/customer/adminUser/listUser?userId=">查看用户</a></li>
                                <li class="active"><a href="/customer/adminOperation/listAction?userId=">用户借阅情况</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="/uploadPage"><i class="fa fa-send"></i> <span class="nav-label">文件上传</span></a>
                        </li>
                    </ul>

                </div>
            </nav>

            <div id="page-wrapper" class="gray-bg">
                <div class="row border-bottom">
                    <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                        <div class="navbar-header">
                            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                            <form role="search" class="navbar-form-custom" action="search_results.html">
                                <div class="form-group">
                                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                                </div>
                            </form>
                        </div>
                        <ul class="nav navbar-top-links navbar-right">
                            <li>
                                <span class="m-r-sm text-muted welcome-message">欢迎来到摆烂图书管理系统</span>
                            </li>
                            <li>
                                <a href="/">
                                    <i class="fa fa-male"></i> 个人中心
                                </a>
                            </li>
                            <li>
                                <a href="/custom/logout">
                                    <i class="fa fa-sign-out"></i> 退出登录
                                </a>
                            </li>
                        </ul>

                    </nav>
                </div>
                <div class="row wrapper border-bottom white-bg page-heading">
                    <div class="col-lg-10">
                        <h2>查看用户摆烂情况</h2>
                        <ol class="breadcrumb">
                            <li>
                                <a href="index.html">首页</a>
                            </li>
                            <li>
                                <a>管理用户</a>
                            </li>
                            <li class="active">
                                <a>用户借阅情况</a>
                            </li>
                        </ol>
                    </div>
                    <div class="col-lg-2">

                    </div>
                </div>
                <div class="wrapper wrapper-content animated fadeInRight">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>用户已借阅图书</h5>
                                    <div class="text-right">

                                        <div class="ibox-tools flex">
                                            <a class="collapse-link">
                                                <i class="fa fa-chevron-up"></i>
                                            </a>
                                            <a class="close-link">
                                                <i class="fa fa-times"></i>
                                            </a>
                                        </div>
                                    </div>

                                </div>
                                <div class="ibox-content">

                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover dataTables-example">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>图书号</th>
                                                <th>学生学号</th>
                                                <th>操作类型</th>
                                                <th>操作时间</th>
                                                <th>应还书时间</th>
                                                <th>操作</th>
                                            </tr>

                                            </thead>
                                            <tbody>
                                            <!-- 待绑定数据 -->
                                            <tr th:each="action:${list}">
                                                <td th:text="${action.getId()}" th:value="${action.getId()}" th:id="dd"></td>
                                                <td th:text="${action.bookId}"></td>
                                                <td th:text="${action.studentId}"></td>
                                                <td th:text="${action.operation}"></td>
                                                <td th:text="${#dates.format(action.appointTime)}" ></td>
                                                <td th:text="${#dates.format(action.backTime)}" ></td>
                                                <td>
                                                    <button th:type="button" class="btn btn-info btn-sm" data-toggle="modal" data-th-placeholder="top" th:title="点击确定" th:value="${action.getId()}" onclick="deleteThis(value)" >删除</button>
                                                    <button th:type="button" class="btn btn-info btn-sm" data-toggle="modal" data-th-placeholder="top" th:title="邮件提醒" th:value="${action.getStudentId()}" onclick="hint(value)" >邮件提醒</button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="pull-right">
                            摆烂图书管理系统
                        </div>
                        <div>
                            <strong>Copyright</strong> 摆烂联盟 &copy; 2022
                        </div>
                    </div>
                </div>

            </div>
        </div>
            <!-- Mainly scripts -->
            <script th:src="@{/js/jquery-2.1.1.js}"></script>
            <script th:src="@{/js/bootstrap.min.js}"></script>
            <script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
            <script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
            <script th:src="@{/js/plugins/jeditable/jquery.jeditable.js}"></script>

            <script src="js/plugins/dataTables/datatables.min.js}"></script>

            <!-- Custom and plugin javascript -->
            <script th:src="@{/js/inspinia.js}"></script>
            <script th:src="@{/js/plugins/pace/pace.min.js}"></script>

            <!-- Page-Level Scripts -->
            <script>
                $(document).ready(function() {
                    $('.dataTables-example').DataTable({
                        dom: '<"html5buttons"B>lTfgitp',
                        buttons: [{
                            extend: 'copy'
                        }, {
                            extend: 'csv'
                        }, {
                            extend: 'excel',
                            title: 'ExampleFile'
                        }, {
                            extend: 'pdf',
                            title: 'ExampleFile'
                        },

                            {
                                extend: 'print',
                                customize: function(win) {
                                    $(win.document.body).addClass('white-bg');
                                    $(win.document.body).css('font-size', '10px');

                                    $(win.document.body).find('table')
                                        .addClass('compact')
                                        .css('font-size', 'inherit');
                                }
                            }
                        ]

                    });

                    /* Init DataTables */
                    var oTable = $('#editable').DataTable();

                    /* Apply the jEditable handlers to the table */
                    oTable.$('td').editable('../example_ajax.php', {
                        "callback": function(sValue, y) {
                            var aPos = oTable.fnGetPosition(this);
                            oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                        },
                        "submitdata": function(value, settings) {
                            return {
                                "row_id": this.parentNode.getAttribute('id'),
                                "column": oTable.fnGetPosition(this)[2]
                            };
                        },

                        "width": "90%",
                        "height": "100%"
                    });


                });


                function fnClickAddRow() {

                    // 获取表单中的信息填入表格
                    var bookname = document.querySelector("#bookname");
                    console.log(bookname.value.valueOf());

                    var booknum = document.querySelector("#booknum");
                    console.log(booknum.value.valueOf());

                    var bookborrow = document.querySelector("#bookborrow");
                    console.log(bookborrow.value.valueOf());

                    var bookstatus = document.querySelector("#bookstatus");
                    console.log(bookstatus.value.valueOf());

                    $('#editable').dataTable().fnAddData([
                        "100",
                        bookname,
                        booknum,
                        bookborrow,
                        bookstatus
                    ]);

                }
            </script>
            <script>
                function deleteThis(o) {
                    var book_id = o;
                    console.log(o);
                    $.ajax({
                        url:"/customer/adminOperation/delete",
                        type:"get",
                        data:{"Id":o},
                        dataType:"json",
                        contentType:"application/json",
                        error: function (data) {
                            location.reload();
                        },
                        success:function (data) {
                            location.reload();
                        }
                    });
                }
            </script>
            <script>
                function hint(o) { /*未写完00点20分*/
                    var book_id = o;
                    console.log(o);
                    $.ajax({
                        url:"/customer/adminUser/hint",
                        type:"get",
                        data:{"student_id":o},
                        dataType:"json",
                        contentType:"application/json",
                        error: function (data) {
                            alert("提醒失败");
                            location.reload();
                        },
                        success:function (data) {
                            alert("提醒成功");
                        }
                    });
                }
            </script>
            <script>
                function searcher() {
                    var text = document.getElementById("searcherText").value;
                    if(text==null)
                        text="";
                    location.href="listAction?userId="+text;
                }
            </script>
    </body>

</html>